<template>
  <eduDlg v-model="dlg" :commitFuc="signUp" title="填写信息">
    <el-form
      :show-message="false"
      class="form"
      :model="form"
      ref="form"
      :rules="rule"
      label-width="70px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input class="input" placeholder="请输入报名人姓名" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input class="input" placeholder="请输入报名人手机号码" v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <div class="input" flex="main:left">
          <el-input placeholder="请输入验证码" style="width: 170px" v-model="form.code"></el-input>
          <sendCode class="code" :phone="form.phone"></sendCode>

        </div>
      </el-form-item>
    </el-form>
  </eduDlg>
</template>

<script lang="ts">
import eduDlg from "/@/components/eduDlg.vue";
import sendCode from "/@/components/login/sendCode.vue";
import { activitySignUp } from "/@/api/activityApi";
export default {
  props: {
    value: Boolean,
    activeId: String,
    callback: Function,
  },
  components: {
    eduDlg,
    sendCode,
  },
  data() {
    return {
      dlg: false,
      form: {
        name: "",
        phone: "",
        code: "",
      },
      rule: {
        name: [{ required: true }],
        phone: [{ required: true }],
        code: [{ required: true }],
      },
    };
  },
  methods: {
    signUp() {
      this.$refs.form.validate((val) => {
        if (val) {
          activitySignUp({ activityId: this.activeId, ...this.form })
            .then((res) => {
              this.callback(res);
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    },
  },
  watch: {
    value(val) {
     
      if(!val){
          this.$refs.form.resetFields()   
      }
       this.$nextTick(()=>{     
          this.dlg = val;
        })
    },
    dlg(val) {
      this.$emit("input", val);
    },
  },
};
</script>

<style lang="scss" scoped>
  .form {
    width: 60%;
    margin: 0 auto;
  }
  .code {
    height: 40px;
    border-radius: 4px;
    width: 30%;
    border: 1px solid #ff5f19;
    color: #ff5f19;
    font-size: 16px;
    margin-left: 10px;
  }
</style>